<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="icon" href="/images/" type="image/x-icon">
		<script src="bootstrap/js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
		<style>
			.top{
				margin-top: 100px;
			}
			.search_keyword{
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.img{
				width: 100%;
				height: 170px;
			}
		</style>
	</head>

	<body>

		<div class="top">
			<div class="col-md-6 col-md-offset-2">
				<div class="form-group clearfix">
					<div class="col-xs-11" style="padding-right: 0;padding-left: 0;">
						<input type="text" class="form-control" id="search" placeholder="请输入房产" style="height: 40px;">
					</div>
					<button type="button" onclick="search()" class="btn btn-info btn-md col-xs-1" style="height: 40px;">
						搜索
					</button>
				</div>
				<div class="search_keyword">
					<p class="text-muted">
						&nbsp;&nbsp;&nbsp;热搜关键词:
						<a href="javascript:void(0)" onclick="hotSearch('青羊')">青羊&nbsp;&nbsp;&nbsp;</a>
						<a href="javascript:void(0)" onclick="hotSearch('武侯')">武侯&nbsp;&nbsp;&nbsp;</a>
						<a href="javascript:void(0)" onclick="hotSearch('高新')">高新&nbsp;&nbsp;&nbsp;</a>
						<a href="javascript:void(0)" onclick="hotSearch('成华')">成华&nbsp;&nbsp;&nbsp;</a>
						<a href="javascript:void(0)" onclick="hotSearch('锦江')">锦江&nbsp;&nbsp;&nbsp;</a>
						<a href="javascript:void(0)" onclick="hotSearch('金牛')">金牛&nbsp;&nbsp;&nbsp;</a>
					</p>
				</div>
				<br>
			</div>
			<div class="col-md-8 col-md-offset-2">
				<ul class="nav nav-tabs col-md-12" role="tablist" id="feature-tab">
					<li class="active">
						<a href="javascript:void(0)" role="tab" onclick="ruSearch()" data-toggle="tab">全站</a>
					</li>
				</ul>
				<div class="tab-content col-md-8 col-lg-9">
					<div class="tab-pane active content-media" id="tab-all">
						<div class="row text-list">
							<div id="divChat">
								<p style="margin-top: 10px;">为您找到38个结果,耗时0.001秒</p>
								<div id="content">
									
								</div>
								<!-- 							分页代码 -->
								<ul class="pagination">
									<li onclick="gotoA(1) ">
										<a href="# ">首页</a>
									</li>
									<li class="active ">
										<a href="# ">1</a>
									</li>
									<li onclick="gotoA(2) ">
										<a href="# ">2</a>
									</li>
									<li onclick="gotoA(3) ">
										<a href="# ">3</a>
									</li>
									<li onclick="gotoA(4) ">
										<a href="# ">4</a>
									</li>
									<li onclick="gotoA(2) ">
										<a href="# ">下一页</a>
									</li>
									<li onclick="gotoA(4) ">
										<a href="# ">尾页</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-lg-3 ranking">
					<table class="table">
						<thead>
							<tr>
								<th>排名</th>
								<th>搜索量</th>
							</tr>
						</thead>
						<tbody id="table-content">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<footer class="col-md-12 text-center">
			<div>
				<p>© 2020 Leeya Master~~~</p>
				<p>
					<a rel="" href="http//www.baidu.com" class="" target="_blank">龟谷工作室</a> by
					<a rel="" href="http//www.baidu.com" class="" target="_blank">Leeya 开发~~~~</a>
				</p>
			</div>
		</footer>

		<script type="text/javascript ">
			function content_template(hits) {
				return `<div class="col-md-12" data-id="${hits._id}" style="padding: 0;">
						<div class="col-md-3" style="padding: 0;">
							<a href="${hits._source.detail_url}">
							<img src="${hits._source.img_url}" alt="..." class="img-rounded img"></a>
						</div>
						<div class="col-md-7">
							<h3 style="margin-top: 10px;">${hits._source.name}<small style="padding-left: 10px;"><span class="label label-info">${hits._source.type}</span></small></h3>
							<h4 style="margin-top: 20px;">${hits._source.address_detail}->${hits._source.address_detail_detail}<small style="padding-left:10px;">${hits._source.address}</small></h4>
							<div style="margin-top: 20px;">
							<span>${hits._source.in_sale_num}套在售</span>
							<span>${hits._source.in_rent_num}套在租</span>
							<span>${hits._source.built_year}年建成</span>
							</div>
						</div>
						<div class="col-md-2">
							<h3 class="text-danger" style="margin-top: 10px;margin-bottom: 0px;font-weight: 600;">${hits._source.price}<small style="padding-left: 5px;">元/㎡<small></h3>
							<h4 class="text-danger" style="margin-top: 0px;"><small style="padding-right: 10px;">涨幅</small>${hits._source.amplitude}</h4>
						</div>
					</div>`
			}
			function table_template(data) {
				return `<tr>
					<td>
						<span class="">${data.top}</span>
						<a target="_blank" title="" href="">${data.name}</a>
					</td>
					<td class="">${data.number}<i class="glyphicon glyphicon-upload" style="color: #d9534f;padding-left:2px;"></i></td>
				</tr>`
			}
			function hotSearch(s){
				$('#search').val(s);
				$.get("/service/search", {
					search: s
				}, function(result) {
					console.log(result.hits);
					let str = "";
					let hits = result.hits.hits;
					hits.forEach(item=>{
						str += content_template(item);
					})
					$('#content').html(str);
				});
			}
			function search() {
				let s = $('#search').val();
				console.log(s);
				$.get("/service/search", {
					search: s
				}, function(result) {
					console.log(result.hits);
					let str = "";
					let hits = result.hits.hits;
					hits.forEach(item=>{
						str += content_template(item);
					})
					$('#content').html(str);
				});
			}
			
			(function(){
				
				let data = [
					{name:'青羊',number:3},
					{name:'成华',number:2},
					{name:'金牛',number:5},
					{name:'锦江',number:1},
					{name:'高新',number:3},
					{name:'武侯',number:7}
				]
				let str = "";
				data.forEach((item,index)=>{
					str += table_template({...item,top:index+1});
				})
				$('#table-content').html(str);
			})()
		</script>
	</body>

</html>
